<template>
  <div class="BuildingnoList-box">
      <div class="title">
          <span>楼房号列表</span>
      </div>
      <div class="index-middlebox">
          <div class="middle-item">
              <span>导入月份</span>
              <el-date-picker v-model="date" type="month" value-format="yyyy-MM" placeholder="选择月份" @change="getmonth"></el-date-picker>
          </div>
          <div class="middle-item" style="width:500px;">
              <template>
                  <el-upload 
                    class="cleanbtn-box"
                    action="http://sun.xinlinju.net/propertyNew/uploadBuildingInfoDetail"
                    :headers="headers"
                    :on-success="handlesuccess"
                    :show-file-list="false"
                    :data='datetime'
                  >
                    <el-button type="primary" class="search">导入楼房号</el-button>
                  </el-upload>
                  <el-button type="primary" class="search2" @click="dialogVisible = true">批量审核</el-button>
                  <el-button type="primary" class="search2" @click="queryPropertyUserList">查询</el-button>
                  <el-dialog
                          title="批量审核"
                          :visible.sync="dialogVisible"
                          width="30%"
                          >
                          <div class="dialog-centerbox">
                            <el-radio v-model="radio" label="1">审核通过</el-radio>
                            <el-radio v-model="radio" label="2">审核不通过</el-radio>
                          </div>
                          <span slot="footer" class="dialog-footer">
                              <el-button @click="dialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="getbatchReviewPropertyBuildingInfo">确 定</el-button>
                          </span>
                  </el-dialog>
              </template>
          </div>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        border
                        style="width: 100%" @selection-change="handleSelectionChange">>
                <el-table-column prop="id" label="选择" width="50" align="center" type="selection">
                </el-table-column>
                <el-table-column type="index"
                                label="序号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="userName"
                                label="业主名字"
                                 align="center">
                </el-table-column>
                <el-table-column prop="mobilePlone"
                                label="手机号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="modules"
                                label="楼号"
                                 align="center">
                </el-table-column>
                <el-table-column prop="roomNumber"
                                label="房号"
                                 align="center">
                </el-table-column>
                <el-table-column prop='propertyFee'
                                label="物业管理费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='waterElectricityFee'
                                label="水电费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='costPoint'
                                label="总兑换费"
                                 align="center">
                </el-table-column>
                <el-table-column prop='importDate'
                                label="导入月份"
                                 align="center">
                </el-table-column>
                <el-table-column prop='isAudit'
                                label="审核状态"
                                 align="center">
                                 <template slot-scope="scope">
                                  <span v-if="scope.row.isAudit == 0">待审核</span>
                                  <span v-if="scope.row.isAudit == 1">审核通过</span>
                                  <span v-if="scope.row.isAudit == 2">审核不通过</span>
                                </template>
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                width="280" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="getreviewPropertyBuildingInfo(scope.$index, scope.row,1)" v-if="scope.row.isAudit != 1 && scope.row.isAudit != 2">审核通过</el-button>
                        <el-button size="mini" @click="getreviewPropertyBuildingInfo(scope.$index, scope.row,2)" v-if="scope.row.isAudit != 1 && scope.row.isAudit != 2">审核不通过</el-button>
                        <!-- <el-button size="mini" @click="getdeletePropertyBuildingInfo(scope.$index, scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
      <!-- 分页器 -->
      <div class="current">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getToken } from '@/utils/auth'
import { getreviewPropertyBuildingInfo, getdeletePropertyBuildingInfo,getbatchReviewPropertyBuildingInfo, queryPropertyUserList} from "@/api/partner";
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        headers: {
            'token':getToken()
        },
        datetime:{
          'dateTime':''
        },
        merchandiseList:[],
        supplierid:'',
        value: '',
        date: '',
        total: 0, // 用户总条数
        pagesize: 10, //每页显示多少条，默认为10条
        pageNo: 1, // 当前页码，默认为第一页
        radio: '1',//批量审核默认选项
        dialogVisible:false,
        selectionList:[]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      handleSelectionChange(row){
        this.selectionList = row
      },
      // 获取月份
      getmonth(row){
        let datetime = this.datetime
        datetime.dateTime = row
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.queryPropertyUserList();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.queryPropertyUserList();
      },
      // 导入列表
      handlesuccess(res,file,list){
          if(res.uploadFlag == false){
            this.$message(res.message)
          }
          this.merchandiseList = res.propertyBuildingInfo
          this.propertyBuilding = res.propertyBuilding
      },
      // 审核
      getreviewPropertyBuildingInfo(index,row,stash){
        let id = row.id.toString()
        let data = {
          id: id,
          status:stash
        }
        getreviewPropertyBuildingInfo(data).then(res => {
          if(res.code == 20000){
            this.queryPropertyUserList()
          }
        })
      },
      // 批量审核
      getbatchReviewPropertyBuildingInfo(){
        let selectionList = this.selectionList;
        let radio = parseInt(this.radio)
        let idsList = []
        selectionList.forEach(item => {
          idsList.push(item.id)
        })
        let data = {
          ids:idsList,
          status:radio
        }
        getbatchReviewPropertyBuildingInfo(data).then(res =>{
          this.dialogVisible = false
          this.queryPropertyUserList()
        })
      },
      // 查询列表
      queryPropertyUserList(){
        let data = {
          importDate:this.datetime.dateTime,
          pageNo: this.pageNo,
          pagesize: this.pagesize,
          roleType:0
        }
        queryPropertyUserList(data).then(res => {
          this.merchandiseList = res.rows
          this.pageNo = res.pageNo
          this.pagesize = res.pageSize
          this.total = res.total
        })
      }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.BuildingnoList-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .middle-item{
            span{
                display: inline-block;
                font-size: 14px;
                padding-right: 15px;
                padding-left: 30px;
                box-sizing: border-box;
            }
            .productname-input{
                width: 150px;
            }
            .search{
                width: 120px;
                margin-left:20px;
            }
            .search2{
                width: 120px;
                margin-left:20px;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .current {
      .block {
        text-align: center;
      }
    }
    .cleanbtn-box{
          display: inline-block;
       }
}
</style>
